<template>
  <div>
<el-descriptions title="个人资料" direction="vertical" :column="4" border v-loading="loading">
  <el-descriptions-item label="用户名">{{nickname}}</el-descriptions-item>
  <el-descriptions-item label="邮箱">{{email}}</el-descriptions-item>
  <el-descriptions-item label="用户状态" >
    <el-tag size="small" v-show="status" type="success">正常</el-tag>
    <el-tag type="danger" size="small" v-show="!status">封禁</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="会员状态">
    <el-tag size="small" v-show="isvip" type="success">会员</el-tag>
    <el-tag type="danger" size="small" v-show="!isvip">非会员</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="登录ip地址">{{host}}</el-descriptions-item>
  <el-descriptions-item label="登录平台">{{platform}}</el-descriptions-item>
  <el-descriptions-item label="资料修改">
    <el-button type="primary" @click="open">修改用户名</el-button>
  </el-descriptions-item>
</el-descriptions>
</div>
</template>

<script>
 import axios from 'axios'
export default {
  data(){
    return{
      isvip:false,
      status:false,
      nickname:'',
      email:'',
      platform:'',
      host:'',
      loading:true
    };
  },
  methods:{
    open() {
        this.$prompt('请输入修改的昵称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.+$/,
          inputErrorMessage: '昵称格式不正确'
        }).then(({ value }) => {
          axios.get(`/api/updateNickName?email=${this.email}&nickname=${value}`).then(
            response=>{
              if(response.data.code===200){
                this.$message({
            type: 'success',
            message: '昵称: ' + value+' 修改成功',
          });
          this.nickname = value;
          localStorage.setItem("nickname",value)
              }else{
                this.$message.error(response.data.message);
              }
            },
            error=>{
              this.$message.error("修改昵称失败");
              console.log(error.$message)
            }
          )
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
  },
  mounted(){
    axios.get(`/api/getInfo?email=${localStorage.getItem("email")}`).then(
      response=>{
        if(response.data.code==200){
          this.nickname=response.data.data.userInfo.nickName;
          this.email=response.data.data.userInfo.email;
          if(response.data.data.userInfo.status==1){
            this.status = true
          }
          this.platform=response.data.data.userbrower
          this.host = response.data.data.loginarea
          this.loading = false
        }else{
          this.$message.error("显示失败");
        }
      },
      error=>{
        this.$message.error("显示失败");
        console.log(error.$message)
      }
    )
  },
}
</script>

<style>

</style>